<template>
	<coreshop-page title="服务详情" mode="left">
		<view class="layout-service-detail">
			<view class="goods-box">
				<view class="goods">
					<image class="img" :src="state.serviceInfo.thumbnail"></image>
					<view class="goods-title">
						<view class="tit">{{state.serviceInfo.title}}</view>
						<view class="desc">{{state.serviceInfo.description}}</view>
					</view>
				</view>
				<view class="goods-msg">
					<view class="item">
						<view class="lab">订单编号：</view>
						<view class="val">{{state.id}}</view>
					</view>
					<view class="item">
						<view class="lab">兑换级别：</view>
						<view class="tag-box">
							<view class="tag" v-for="item,index in state.serviceInfo?.allowedMemberships" :key="index">
								<uv-tags :text="item" type="success" plain size="mini"></uv-tags>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="lab">兑换门店：</view>
						<view class="tag-box">
							<view class="tag" v-for="item,index in state.serviceInfo?.consumableStores" :key="index">
								<uv-tags :text="item" type="warning" plain size="mini"></uv-tags>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 服务券 -->
			<view class="service-card">
				<uv-tabs :list="state.serviceStatusList" lineColor="#D33123" @change="handleChangeTab"
					:itemStyle="{'width':'25%','height':'44px','padding':'0'}"></uv-tabs>
				<view class="card-box" v-if="state.servicesList.length > 0">
					<view v-for="item in state.servicesList" :key="item.id"
						:class="['item-box',{'on':state.serviceStatus != 0}]">
						<view class="card-left">
							<view class="title">
								<text class="tit">核销码：</text>
								<text class="desc">{{item.redeemCode}}</text>
							</view>
							<view class="time">{{item.validityType == 1 ? '长期有效' : '限时间段内消费'}}</view>
						</view>
						<view class="card-rigth">
							<view class="btn">
								<uv-button text="正常" type="info" plain size="mini"
									@click="handleShowCode(item.status,item.redeemCode)"
									v-if="item.status==ServiceCardStatusEnum.normal"></uv-button>
								<uv-button text="过期" type="default" plain size="mini"
									v-if="item.status==ServiceCardStatusEnum.overdue"></uv-button>
								<uv-button text="作废" type="warning" plain size="mini"
									v-if="item.status==ServiceCardStatusEnum.nullify"></uv-button>
								<uv-button text="已核销" type="success" plain size="mini"
									v-if="item.status==ServiceCardStatusEnum.verified"></uv-button>
							</view>
						</view>
					</view>
					<view class="no-data" v-if="state.noData">没有更多了</view>
				</view>
				<view v-else class="m-t-30">
					<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
				</view>
			</view>

			<uv-popup ref="codePopup" mode="center" :safeAreaInsetBottom="false"
				:customStyle="{'border-radius':'15rpx'}">
				<view class="code-box">
					<canvas canvas-id="qrcode" style="width: 200px; height: 200px;" />
					<image v-if="state.code" class="img" :src="state.code"></image>
				</view>
			</uv-popup>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { queryServicesById, queryServicesTickets } from '@/core/api';
	import type { Response } from '@/core/models';
	import { handleShowToast } from '@/core/utils';
	import { ServiceCardStatusEnum, EmptyEnum } from '@/core/enum';
	import uQRCode from '@/core/utils/uqrcode.js'

	interface QueryParams {
		id : string;
	}

	const codePopup = ref();

	const state = reactive<{
		id : string,
		serviceInfo : any;
		serviceStatusList : Array<{ name : string, id : number }>;
		serviceStatus : number;
		page : number;
		limit : number;
		noData : boolean;
		servicesList : Array<any>;
		code : string;
	}>({
		id: '',
		serviceInfo: {},
		serviceStatusList: [{ name: '正常', id: 0 }, { name: '过期', id: 1 }, { name: '作废', id: 2 }, { name: '已核销', id: 3 }],
		serviceStatus: 0,
		page: 1,
		limit: 10,
		noData: false,
		servicesList: [],
		code: "",
	});

	onLoad((query : QueryParams) => {
		state.id = query.id;
		getServicesById();
		getServicesTickets();
	});

	onReachBottom(() => {
		if (!state.noData) {
			state.page++;
			getServicesTickets();
		}
	});

	/** 获取服务详情 */
	const getServicesById = async () => {
		const services : Response<any> = await queryServicesById({ id: state.id });
		if (services.status) {
			state.serviceInfo = services.data;
		} else {
			handleShowToast(services.msg)
		}
	}

	/** 获取单个服务订单下面服务券 */
	const getServicesTickets = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		const servicesTickets : Response<any> = await queryServicesTickets({
			id: state.id,
			status: state.serviceStatus,
			page: state.page,
			limit: state.limit
		});
		if (servicesTickets.status) {
			state.servicesList = state.servicesList.concat(servicesTickets.data);
			if (servicesTickets.data.length < state.limit) {
				state.noData = true;
			}
			uni.hideLoading();
		} else {
			uni.hideLoading();
			handleShowToast(servicesTickets.msg);
		}
	}

	/** 切换选项卡 */
	const handleChangeTab = (e : any) => {
		state.serviceStatus = e.id;
		state.page = 1;
		state.noData = false;
		state.servicesList = [];
		getServicesTickets();
	}

	/** 显示二维码 */
	const handleShowCode = (status : number, code : string) => {
		if (status == ServiceCardStatusEnum.normal && state.serviceStatus == 0) {
			uQRCode.make({
				canvasId: 'qrcode',
				text: code,
				size: 200,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'jpg',
				correctLevel: uQRCode.errorCorrectLevel.H,
				success: (res : any) => {
					state.code = res;
				}
			})
			codePopup.value.open();
		}

	}
</script>
<style lang="scss" scoped>
	@import './detail.scss';
</style>